//修改模板
import {Button, Form, Input, Row, Col, Modal, Select, Table, Pagination, Radio, Layout, Tree, Icon} from 'antd';
import React, {Component} from 'react';
import app from '../AppMethod';
import {merchant, helpCenter,car} from '../value';
import moment from 'moment';
import {config} from "../config";


const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const Content = Layout.Content;
const TreeNode = Tree.TreeNode;
const confirm = Modal.confirm;

class EditCarPosition extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editVisible: false,
            addConfirmLoading: false,
            logisticsList: []
        }
    }

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12}
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <span>
                <span style={{color: '#1890ff', cursor: 'pointer', marginLeft: '10px'}}
                      onClick={() => this.setModalVisible(true)}>修改停靠位置</span>
                <Modal
                    maskClosable={true}
                    wrapClassName="vertical-center-modal"
                    visible={this.state.editVisible}
                    confirmLoading={this.state.addConfirmLoading}
                    title='修改'
                    width="500px"
                    onCancel={() => this.setModalVisible(false)}
                    footer={[
                        <Button key="back" type='default' onClick={() => this.setModalVisible(false)}>取消</Button>,
                        <Button key="submit" type='primary' onClick={() => this.clickOk()}>确定</Button>,
                    ]}
                >
                    <Row>
                                <Col offset={1} span={22}>
                                    <Form className="login-form">
                                        <FormItem label="客户车牌号" {...this.formItemLayout}>
                                            {
                                                getFieldDecorator('output_customer_car', {})(
                                                    <Input placeholder="请输入"/>
                                                )
                                            }
                                        </FormItem>
                                        <FormItem label="停靠位置" {...this.formItemLayout}>
                                            {
                                                getFieldDecorator('output_stop_position', {})(
                                                    <Input placeholder="请输入"/>
                                                )
                                            }
                                        </FormItem>
                                    </Form>
                                </Col>
                            </Row>
                </Modal>
            </span>
        )
    };

    setModalVisible(visible) {
        if (visible) {
            let data = this.props.data;
            let formData = {
                output_customer_car: data.output_customer_car,
                output_stop_position: data.output_stop_position
            };
            this.props.form.setFieldsValue(formData);
        }
        this.setState({
            editVisible: visible
        })
    };

    clickOk() {
        this.props.form.validateFields((error, values) => {
            if (!error) {
                let output_id = this.props.data.output_id;
                values.output_id = output_id;
                console.log(values);
                app.post(car.UPDATE_CARPOSITION, values).then((result) => {
                    if (result.code === 1) {
                        app.alert(result.msg, 'success', 3);
                        this.setModalVisible(false);
                        this.props.handleRefresh();
                    } else {
                        app.alert(result.msg, 'error', 3);
                    }
                })
            }
        })
    }
}

const EditCarPositions = Form.create()(EditCarPosition);

class ConfirmAddProperty extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            properTyList: []
        }
    };

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12}
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <span>
                <Button type={'danger'} onClick={() => this.handleShowModal(true)}>添加属性规格</Button>
                <Modal
                    maskClosable={true}
                    wrapClassName="vertical-center-modal"
                    visible={this.state.visible}
                    title='添加属性'
                    width="500px"
                    onCancel={() => this.handleShowModal(false)}
                    footer={[
                        <Button key="back" type='default' onClick={() => this.handleShowModal(false)}>取消</Button>,
                        <Button key="submit" type='primary' onClick={() => this.clickOk()}>确定</Button>,
                    ]}
                >
                    <Row>
                        <Col offset={1} span={22}>
                            <Form className="login-form">
                                {
                                    this.state.properTyList.map((item, index) => {
                                        return (
                                            <FormItem key={index}
                                                      label={item.propertyName} {...this.formItemLayout}>
                                                {
                                                    getFieldDecorator(item.propertyId, {
                                                        rules: [{required: true, message: '请输入属性值'}]
                                                    })(
                                                        <Input palceholder="请输入"/>
                                                    )
                                                }
                                            </FormItem>
                                        )
                                    })
                                }
                            </Form>
                        </Col>
                    </Row>
                </Modal>
            </span>
        )
    };

    componentDidMount() {

    }

    /**
     * 显示和隐藏添加属性弹框
     * @param visble
     */
    handleShowModal(visible) {
        if (visible) {
            let data = this.props.data;
            this.setState({properTyList: data});
        }
        this.setState({visible});
    }

    /**
     * 处理添加属性值事件
     */
    clickOk() {
        this.props.form.validateFields((error, values) => {
            if (!error) {
                let valueArr = [];
                for (let key in values) {
                    valueArr.push(values[key]);
                }
                this.props.handleAddPropertyValue(valueArr);
                this.handleShowModal(false);
            }
        })
    }
}

const ConfirmAddPropertys = Form.create()(ConfirmAddProperty);

class TableAdd extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            properTyList: []
        }
    };

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12}
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <span>
                <Button  style={{marginLeft:20}} type={'primary'} onClick={() => this.handleShowModal(true)}>创建</Button>
                <Modal
                    maskClosable={true}
                    wrapClassName="vertical-center-modal"
                    visible={this.state.visible}
                    title='添加餐桌'
                    width="500px"
                    onCancel={() => this.handleShowModal(false)}
                    footer={[
                        <Button key="back" type='default' onClick={() => this.handleShowModal(false)}>取消</Button>,
                        <Button key="submit" type='primary' onClick={() => this.clickOk()}>确定</Button>,
                    ]}
                >
                    <Row>
                        <Col offset={1} span={22}>
                            <Form className="login-form">
                                <FormItem label={'餐号'} {...this.formItemLayout}>
                                    {
                                        getFieldDecorator('name', {
                                            rules: [{required: true, message: '请输入餐号'}]
                                        })(
                                            <Input palceholder="请输入"/>
                                        )
                                    }
                                </FormItem>
                                <FormItem label={'类型'} {...this.formItemLayout}>
                                    {
                                        getFieldDecorator('type', {
                                            rules: [{required: true, message: '请输入选择类型'}]
                                        })(
                                            <Select placeholder="请选择">
                                                <Option value="1">大桌</Option>
                                                <Option value="2">中桌</Option>
                                            </Select>
                                        )
                                    }
                                </FormItem>
                                <FormItem label={'座位'} {...this.formItemLayout}>
                                    <div style={{display:'flex'}}>
                                    {
                                        getFieldDecorator('sits', {
                                            rules: [{required: true, message: '请输入座位'}]
                                        })(
                                            <Input palceholder="请输入"/>
                                        )
                                    }人
                                    </div>
                                </FormItem>
                                <FormItem label={'标签'} {...this.formItemLayout}>
                                    {
                                        getFieldDecorator('label', {
                                            rules: [{required: true, message: '请输入标签'}]
                                        })(
                                            <Input palceholder="请输入"/>
                                        )
                                    }
                                </FormItem>
                            </Form>
                        </Col>
                    </Row>
                </Modal>
            </span>
        )
    };

    componentDidMount() {

    }

    /**
     * 显示和隐藏添加属性弹框
     * @param visble
     */
    handleShowModal(visible) {
        if (visible) {
            let data = this.props.data;
            this.setState({properTyList: data});
        }
        this.setState({visible});
    }

    /**
     * 处理添加属性值事件
     */
    clickOk() {
        this.props.form.validateFields((error, values) => {
            if (!error) {
                let valueArr = [];
                for (let key in values) {
                    valueArr.push(values[key]);
                }
                this.props.handleAddPropertyValue(valueArr);
                this.handleShowModal(false);
            }
        })
    }
}

const TableAdds = Form.create()(TableAdd);

export {
    EditCarPositions,//修改停靠位置和客户车牌号
    ConfirmAddPropertys,//添加属性值
    TableAdds,//添加餐桌
}